<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的群聊</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link href="/peopleList/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/peopleList/js/jquery-3.3.1.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>

</head>
<script>
    $(function () {
        var user = JSON.parse(sessionStorage.getItem("user"));
        $.get("/chatRooms/" + user.id, function (data) {

            console.log(data);
            var list = {list: data};
            // console.log(list);
            $("#rooms").renderValues(list, {
                getHref: function (item, value) {
                    $(item).attr("href", "/mine/chatroom.html?room=" + value);
                }
            })

            $.each(data, function (index, ele) {
                // if (title != null) {
                //     title = "";
                // }
                var title = "";
                $.get("/chatRooms/users/" + ele.room, function (userData) {
                    $.each(userData, function (i, e) {
                        title += "<li class=_j_set_width><img src=" + e.headImgUrl + "></li>";
                    })
                    // ele.haha = title;
                    $("ul[data-id="+ele.room+"]").append(title);
                });
            })
        })
    })

</script>
<body>


<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="/mine/message.html">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">群聊列表</span>
        </div>
        <a href="/index.html" class="aui-navBar-item">
            首页
        </a>
    </header>
    <link href="https://css.mafengwo.net/mobile/css/together/together.css?1526627473" rel="stylesheet" type="text/css"/>
    <div id="rooms">
        <div render-loop="list" id="listUser">
            <dl class="user-list">
                <a class="friendchatRooms" render-key="list.room" render-fun="getHref">
                    群名&nbsp;&nbsp;<span render-html="list.roomName"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    群号&nbsp;&nbsp;<span render-html="list.room"></span>
                    <dd>
                        <ul style="width:450px" id="userImg" render-attr="data-id=list.room">
                            <li class="_j_set_width" render-html="list.haha">
                                <!--<img src="list.user.headImgUrl"/>-->
                            </li>
                        </ul>
                    </dd>
                </a>
            </dl>
        </div>
    </div>
    </div>
</section>

<script>
    $(function () {

    })
</script>
</body>
</html>
